import React, {Component} from 'react';
import {connect} from 'react-redux';
import Proptypes from 'prop-types';
import {updateInfoAsync} from './../redux/actions';

import Avatarlist from "./Avatarlist";
import {Button, InputItem, List, TextareaItem, Picker, Toast} from "antd-mobile";

const salaryZone = [
    {
        label: '面议', value: '面议'
    },
    {
        label:'1k',
        value: '1k',
        children:[
            {label:'2k', value:'2k'}, {label:'3k', value:'3k'},
            {label:'4k', value:'4k'}, {label:'5k', value:'5k'},
            {label:'6k', value:'6k'}
        ]
    },
    {
        label:'7k',
        value: '7k',
        children:[
            {label:'8k', value:'8k'}, {label:'9k', value:'9k'},
            {label:'10k', value:'10k'}, {label:'11k', value:'11k'},
            {label:'12k', value:'12k'}
        ]
    },
    {
        label:'13k',
        value: '13k',
        children:[
            {label:'14k', value:'14k'}, {label:'15k', value:'15k'},
            {label:'16k', value:'16k'}, {label:'17k', value:'17k'},
            {label:'18k', value:'18k'}
        ]
    }
]
class Workerinfo extends Component {
    static propTypes = {
        user:Proptypes.object.isRequired,
        updateInfo:Proptypes.func.isRequired
    }
    state = {
        avatar:this.props.user.avatar || '',
        nickname:this.props.user.nickname || '',
        salary:(this.props.user.salary && this.props.user.salary.split('-')) || ['面议'],
        workerJob:this.props.user.workerJob || '',
        goodness:this.props.user.goodness || ''
    }

    handleChange = (type, data) => {
        switch (type) {
            case 'avatar':this.setState({avatar:data});break;
            case 'nickname':this.setState({nickname:data});break;
            case 'salary':this.setState({salary:data});break;
            case 'job':this.setState({workerJob:data});break;
            case 'goodness':this.setState({goodness:data});break;
            default: break;
        }
    }
    handleSave = () => {
        let flag = Object.keys(this.state).some(k=>this.state[k]=='')
        if(flag){
            Toast.fail('请完善全部信息',1)
        }else{
            let {history, user} = this.props;
            let salary = this.state.salary.join('-')
            let userData = {...user, ...this.state, salary}

            this.props.updateInfo(userData, (code, msg)=>{
                if(code === 0){
                    Toast.success('信息保存成功',1,()=>{
                        history.replace('/home')
                    })
                }else{
                    Toast.fail(msg,1)
                }
            })
        }

    }

    render() {
        let {nickname, salary, workerJob, goodness, avatar} = this.state;
        return (
            <div>
                <div style={{height:'calc(100vh - 92px)',overflow:'auto',paddingBottom:'15px',background:'#fff'}}>
                    <List>
                        <Avatarlist avatar={avatar} setAvatar={(data)=>this.handleChange('avatar',data)}></Avatarlist>
                        <InputItem
                            placeholder="个人名称，如牛气冲天"
                            value={nickname}
                            onChange={(val)=>this.handleChange('nickname',val)}
                        >
                            个人名称
                        </InputItem>
                        <InputItem
                            placeholder="求职岗位，如web前端工程师"
                            value={workerJob}
                            onChange={(val)=>this.handleChange('job',val)}
                        >
                            求职岗位
                        </InputItem>
                        <Picker
                            title="月薪(单位：千元)"
                            data={salaryZone}
                            value={salary}
                            format={(labels)=>labels.join('-')}
                            cols={2}
                            onOk={(val)=>this.handleChange('salary',val)}
                        >
                            <List.Item arrow="horizontal">期望薪资</List.Item>
                        </Picker>
                        <TextareaItem
                            title="个人优势"
                            placeholder="填写个人优势，让招聘者找到你的闪光点..."
                            value={goodness}
                            onChange={(val)=>this.handleChange('goodness',val)}
                            count={150}
                            rows={10}
                        />
                    </List>
                </div>
                <Button type="primary" onClick={this.handleSave}>保存</Button>
            </div>
        )
    }
}

export default connect(
    (state)=>({
        user:state.user
    }),
    {
        updateInfo:updateInfoAsync
    }
)(Workerinfo)